<template>
    <div>
        <div>
            <el-menu>
                <el-menu-item>
                    <img src="../assets/complaintheadPic.png" alt="移动公司投诉平台" class="headPic">
                </el-menu-item>
            </el-menu>
        </div>
        <div class="complaint">
            <b>填写投诉详情</b>
            <el-form ref="complaintForm" :model="complaintForm" :rules="rules" label-width="18vh" class="complaint-form">
                <el-form-item label="手机号：" prop="phoneNumber">
                    <el-input v-model="complaintForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="投诉类型：" prop="issueType">
                    <el-select v-model="complaintForm.issueType" placeholder="请选择投诉类型">
                        <el-option label="费用疑问" value="费用疑问"></el-option>
                        <el-option label="业务" value="业务"></el-option>
                        <el-option label="套餐变更" value="套餐变更"></el-option>
                        <el-option label="手机网络" value="手机网络"></el-option>
                        <el-option label="服务质量" value="服务质量"></el-option>
                        <el-option label="其他问题" value="其他问题"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题详情：" prop="issueDetails">
                    <el-input type="textarea" placeholder="请输入问题详情（400字以内）" v-model="complaintForm.issueDetails"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button round type="primary" @click="onSubmit" style="width: 15vh;">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            complaintForm: {
                phoneNumber: '',
                issueType: '',
                issueDetails: ''
            },
            rules: {
                phoneNumber: [
                { required: true, message: '手机号不能为空', trigger: 'blur' }
                ],
                issueType: [
                { required: true, message: '请选择投诉类型', trigger: 'change' }
                ],
                issueDetails: [
                { required: true, message: '问题详情不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        onSubmit() {
            
                    const formData = {
                        phoneNumber: this.complaintForm.phoneNumber,
                        issueType: this.complaintForm.issueType,
                        issueDetails: this.complaintForm.issueDetails
                    };
                    
                    // 使用axios发送POST请求到后端
                    axios.post('http://localhost:8089/complaintInsert', formData)
                        .then(response => {
                            console.log('Form submitted successfully:', response.data);
                            alert("投诉记录提交成功，请耐心等待客服回复");
                        })
                        .catch(error => {
                            console.error('Error submitting form:', error);
                        });
               
        }
    }
}
</script>

<style>
.headPic {
    position: absolute;
    top: -2vh;
    left: 10%;
    width: 80%;
}
.complaint {
    position: absolute;
    left: 30%;
    margin-top: 10%;
    width: 40%;
    height: 70vh;
}
.complaint b {
    position: absolute;
    top:5%;
    width: 100%;
    font-size: 25px;
    text-align: center;
}
.complaint-form {
    margin: 15% 15% 0 14%;
}
.complaint-form label{
    font-size: 20px;
    color:rgb(66, 66, 66);
}
.complaint-form input {
    border: 1px solid rgb(66, 66, 66);
}
.complaint-form textarea {
    margin-top: 1vh;
    width: 42vh;
    border: 1px solid rgb(66, 66, 66);
    resize: none;
    height: 20vh;
}
</style>
